<template>
  <div class="all">
    <div class="headerTop clearfix">
      <span class="back">编辑</span>
      <span class="font_d tc">订单详情</span>
    </div>
    <div class="bg">
      <img src="../../assets/4cart/bgimg.png" alt="" class="beijing">
      <img src="../../assets/4cart/mousered.png" alt="" class="mous">
      <img src="../../assets/4cart/sharesend.png" alt="" class="share">
    </div>
    <div class="fly">
      <div class="japan">
        <img src="../../assets/4cart/duihao.png" alt="">
        <img src="../../assets/4cart/plane.png" alt="">
        <span>日本直邮</span>
      </div>
      <div class="jia" v-for="er in 2">
        <div class="img-p">
          <img src="../../assets/4cart/duihao.png" alt="" class="img1">
          <img src="../../assets/4cart/mifen.png" alt="" class="img2">
        </div>
        <div class="mifen">
          <p class="p-1">会呼吸的丝滑蜜粉</p>
          <p class="p-2">规格:蜜粉</p>
          <p class="p-3">¥166.06</p>
        </div>
        <div class="dianji">
          <div class="d-1">-</div>
          <div class="d-2">1</div>
          <div class="d-3">+</div>
        </div>
      </div>
      <div class="piu">
        <span class="piu-1">商品金额</span>
        <span class="piu-2">¥332.12</span>
      </div>
      <div class="piu">
        <span class="piu-1">纳税金额</span>
        <span class="piu-2">¥0.33</span>
      </div>
      <div class="piu">
        <span class="piu-1">应付总金额</span>
        <span class="piu-2">¥166.39</span>
      </div>
      <router-link to="zhifu">
        <div class="piu">
          <div class="ten">结算(2)</div>
        </div>
      </router-link>
    </div>
    <div class="bangzi">
      <div class="japan">
        <img src="../../assets/4cart/duihao.png" alt="">
        <img src="../../assets/4cart/plane.png" alt="">
        <span>韩国直邮</span>
      </div>
      <div class="jia">
        <div class="img-p">
          <img src="../../assets/4cart/duihao.png" alt="" class="img1">
          <img src="../../assets/4cart/mifen.png" alt="" class="img2">
        </div>
        <div class="mifen">
          <p class="p-1">会呼吸的丝滑蜜粉</p>
          <p class="p-2">规格:蜜粉</p>
          <p class="p-3">¥166.06</p>
        </div>
        <div class="dianji">
          <div class="d-1">-</div>
          <div class="d-2">1</div>
          <div class="d-3">+</div>
        </div>
      </div>
      <div class="piu">
        <span class="piu-1">商品金额</span>
        <span class="piu-2">¥332.12</span>
      </div>
      <div class="piu">
        <span class="piu-1">纳税金额</span>
        <span class="piu-2">¥0.33</span>
      </div>
      <div class="piu">
        <span class="piu-1">应付总金额</span>
        <span class="piu-2">¥166.39</span>
      </div>
      <router-link to="zhifu">
        <div class="piu">
          <div class="ten">结算(1)</div>
        </div>
      </router-link>
    </div>
    <div class="love">
      <div class="you">猜你喜欢</div>
      <div class="four">
        <div class="unify" v-for="to in 4">
          <img src="../../assets/3king/断货王/listImg1.png" alt="">
          <p>不易脱妆口红</p>
          <p class="aaa">¥59</p>
        </div>
      </div>
    </div>
    <last></last>
  </div>
</template>
<script>
  import last from '../../components/WangFooter/WangFooter'
  export default {
    methods: {
      doBack(){
        this.$router.go(-1)
      }
    },
    components: {
      last
    }
  }
</script>
<style scoped>
  .headerTop{
    background: #e53e42;
    line-height: 2.13rem;
    text-align: center;
    position: relative;
  }
  .back{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0.3rem;
    color: white;
    font-size: 0.67rem;
  }
  .font_d{
    font-size: 0.8rem;
    color: #fff
  }
  .bg{
    position: relative;
  }
  .beijing{
    width: 100%;
  }
  .mous{
    width: 3.47rem;
    position: absolute;
    top: 0.2rem;
    left: 5.12rem;
  }
  .share{
    width: 4.89rem;
    position: absolute;
    top: 1rem;
    right: 0.53rem;
  }
  .fly{
    margin-bottom: 0.53rem;
  }
  .japan{
    font-size: 0.53rem;
    background: white;
    padding: 0.53rem;
    border-bottom: 1px solid gainsboro;
  }
  .japan img{
    width: 0.67rem;
    margin-right: 0.2rem;
  }
  .jia{
    background: white;
    padding: 0.53rem;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
  }
  .img-p{
    margin-top: 0.4rem;
  }
  .img1{
    width: 0.67rem;
    margin-right: 0.53rem;
  }
  .img2{
    width: 1.91rem;
  }
  .p-1{
    font-size: 0.62rem;
    margin-bottom: 0.2rem;
  }
  .p-2{
    font-size: 0.44rem;
    color: #666666;
    margin-bottom: 0.53rem;
  }
  .p-3{
    font-size: 0.44rem;
    color: red;
  }
  .dianji{
    width: 3rem;
    height: 1rem;
    border: 1px solid gainsboro;
    border-radius: 1.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:0 0.2rem 0 0.2rem;
    margin-top: 2rem;
  }
  .d-1{
    width: 0.89rem;
    text-align: center;
    font-size: 0.53rem;
    border: 1px solid gainsboro;
    border-radius: 1.8rem;
  }
  .d-2{
    font-size: 0.67rem;
  }
  .d-3{
    width: 0.89rem;
    text-align: center;
    font-size: 0.53rem;
    border: 1px solid gainsboro;
    border-radius: 1.8rem;
  }
  .piu{
    padding: 0.67rem;
    background: white;
    overflow: hidden;
    font-size: 0.62rem;
    color: #666666;
    border-bottom: 1px solid #ccc;
  }
  .piu-2{
    float: right;
    color: red;
  }
  .ten{
    float: right;
    border: 1px solid #ccc;
    border-radius: 1.8rem;
    padding: 0.1rem 0.5rem;
    background: red;
    color: white;
  }
  .love{
    background: white;
    text-align: center;
    padding: 0.3rem;
  }
  .you{
    color: #666;
    font-size: 0.62rem;
  }
  .four{
    display: flex;
  }
  .unify{
    flex: 1;
    font-size: 0.53rem;
  }
  .unify img{
    width: 1.67rem;
    margin-bottom: 0.2rem;
  }
  .aaa{
    color: red;
  }
</style>
